<template>
  <div class="communityBox dark">
    <!-- @select="handleSelect" -->
    <el-menu
      :default-active="defaultIndex"
      class="el-menu-Top"
      mode="horizontal"
      :background-color="props?.themeColor?.backgroundColor"
      :text-color="props?.themeColor?.textColor"
      :active-text-color="props?.themeColor?.activeTextColor"
    >
      <li class="left" @click="routerJump('push', 'Home')">
        <el-menu-item class="logoItem" disabled
          ><div class="logo">
            <!-- 默认白色主题，黑色logo -->
            <img
              src="/src/assets/img/logo/Logo-Black4.png"
              alt=""
              v-if="!props?.themeColor?.backgroundColor"
            />
            <img src="/src/assets/img/logo/Logo-White4.png" alt="" v-else /></div
        ></el-menu-item>
      </li>

      <el-menu-item
        class="mainMenu"
        :index="navbarItem.id"
        v-for="navbarItem in navbarKeyword"
        :key="navbarItem.id"
        @click="handleClick(navbarItem.path)"
      >
        <div class="name">{{ navbarItem.name }}</div>
        <!-- 英文名称 -->
        <!-- <div class="scientificName">{{ navbarItem.scientificName }}</div> -->
      </el-menu-item>

      <li class="right">
        <el-menu-item class="info-area" disabled>
          <div class="right-area" @click="routerJumpByUserInfo">
            <span class="image" href="#">
              <img src="/src/assets/img/logo/LogoIcon-White4.png" alt="" />
            </span>
            <div class="info">
              <template v-if="!userInfo">
                <span class="notLogin">欢迎登录</span>
                <p>加入动物保护之旅</p>
              </template>
              <template v-else>
                <p>尊敬的守护者</p>
                <span class="hasLogin"
                  ><i class="userInfoAccount">{{ userInfo.account }}</i></span
                >
              </template>
            </div>
          </div>
        </el-menu-item>
      </li>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import type { IHeaderBarInfo } from "./type"
import useRouterJump from "@/hooks/useRouterJump"
import { ref } from "vue"
import { useRoute } from "vue-router"

const emit = defineEmits(["handleClickByNullRouter"])

const props = withDefaults(defineProps<IHeaderBarInfo>(), {
  // defaultIndex: "1"
  // themeColor: () => ({
  //   backgroundColor: "#fff",
  //   textColor: "black",
  //   activeTextColor: "#409eff"
  // })
})

const { userInfo, routerJump, routerJumpByUserInfo } = useRouterJump()

const route = useRoute()
// console.log(route.meta.activeIndex)
// 根据route的meta判断导航的高亮显示
const defaultIndex = ref(route.meta.activeIndex)

function handleClick(path) {
  if (path) {
    routerJump("push", path)
  } else {
    console.log("routeName为null。做其他业务逻辑")
    emit("handleClickByNullRouter")
  }
  console.log(path)
}

// router.beforeEach((to, form) => {
//   console.log(to.fullPath)
//   // console.log(props.navbarKeyword)
//   props.navbarKeyword.forEach((item) => {
//     console.log(item)

//     console.log("/" + item.path?.split("/")[1])
//     if (to.fullPath == "/" + item.path?.split("/")[1]) {
//       defaultIndex.value = item.id
//     }
//   })
// })
// 这样写刷新完仍是是默认的值
</script>

<style lang="less" scoped>
.communityBox {
  position: relative;
  width: 100%;
  background-color: #ebf3fa;

  .left,
  .right {
    display: flex;
    align-items: center;
  }

  .el-menu {
    padding: 0 140px;
    justify-content: center;
  }

  .el-menu--horizontal {
    height: 72px;
  }

  .logoItem {
    // 改变默认disabled的样式
    &.is-disabled {
      opacity: 1;
      cursor: pointer;
      //   background: 0 0 !important;
    }
    // 取消鼠标悬浮的背景颜色
    &:hover {
      background-color: transparent;
    }
    .logo {
      width: 170px;
      height: 60px;

      transition: all 0.5s;
      img {
        width: 80%;
        height: 80%;
      }

      &:hover {
        transform: scale(1.03);
      }
    }
  }

  .mainMenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // 取消这个行高--el-menu-item-height: 0px;
    line-height: 20px;

    .name {
      font-size: 14px;
    }
    .scientificName {
      font-size: 12px;
      margin-top: 2px;
    }
  }

  .info-area {
    margin-left: 40px;
    // 改变默认disabled的样式
    &.is-disabled {
      opacity: 1;
      cursor: pointer;
      //   background: 0 0 !important;
    }
    // 取消鼠标悬浮的背景颜色
    &:hover {
      background-color: transparent;
    }
    .right-area {
      // 取消鼠标悬浮的背景颜色

      display: flex;
      align-items: center;
      // 取消这个行高--el-menu-item-height: 0px;
      line-height: 20px;
      .image {
        border: 1px ridge #eee;
        border-radius: 50%;
        transform: scale(0.85);
        img {
          // border: 1px solid #eee;
          transform: scale(0.8);
          width: 55px;
          height: 55px;
        }
      }
      .info {
        display: flex;
        flex-direction: column;
        //   justify-content: center;
        height: 100%;
        margin-left: 12px;
        .notLogin {
          color: #999;
        }

        .hasLogin {
          // color: rgb(14, 14, 14);
          color: #797777;
          .userInfoAccount {
            font-weight: 600;
          }
        }
        p {
          font-size: 14px;
          color: #858792;
          // margin-top: 5px;
        }
      }
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    // margin: 0 240px;
    padding: 0 140px;
    margin-top: 20px;
  }
}
.dark {
}
</style>
